<template>
    <view class="tab-bar">
        <view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
            <image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
            <view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>
        </view>
    </view>
 
</template>
 
 
 
<script>
    export default {
        props: {
            selected: { // 当前选中的tab index
                type: Number,
                default: 0
            }
 
        },
        data() {
            return {
                color: "#333333",
                selectedColor: "#ff9327",
                list: [{
                    pagePath: "/pages/index/index",
                    iconPath: "/static/tabble/indexnoact.png",
                    selectedIconPath: "/static/tabble/indexact.png",
                    text: "首页"
                },
				// {
				//     pagePath: "",
				//     iconPath: "/static/tabble/ordernoact.png",
				//     selectedIconPath: "/static/tabble/orderact.png",
				//     text: "商城"
				// },
				{
                    pagePath: "/pages/order/index",
                    iconPath: "/static/tabble/ordernoact.png",
                    selectedIconPath: "/static/tabble/orderact.png",
                    text: "订单"
                },{
                    pagePath: "/pages/user/index",
                    iconPath: "/static/tabble/usernoact.png",
                    selectedIconPath: "/static/tabble/useract.png",
                    text: "我的"
                }]
            }
        },
        methods: {
            switchTab(item, index) {
                console.log("item", item)
                console.log("index", index)
                let url = item.pagePath;
				uni.redirectTo({
					url:item.pagePath
				})
				// if(index == 1){
				// 	this.navigatorShop()
				// }
            },
			navigatorShop(){
				uni.navigateToMiniProgram({
				  appId: 'wx66046d4032de04d9',
				  path: 'pages/index/index',
				  extraData: {
				    'data1': 'test'
				  },
				  success(res) {
				    // 打开成功
				  }
				})
			}
        }
    }
</script>
 
<style lang="scss">
    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
 
        .tab-bar-item {
            flex: 1;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
 
            .tab_img {
                width: 46rpx;
                height: 50rpx;
            }
 
            .tab_text {
                font-size: 20rpx;
                margin-top: 9rpx;
            }
        }
    }
</style>